<template>
  <div>
    <!-- <h4>订单管理</h4> -->
    <Row>
      <span style="font-weight:800">下单时间：</span>
      <div label="创建时间">
        <DatePicker v-model="selectDate"
                    type="daterange"
                    format="yyyy-MM-dd"
                    clearable
                    @on-change="selectDateRange"
                    placeholder="选择时间范围"
                    style="width: 200px"></DatePicker>
        <div style="display:inline-block">
          <Button @click="handleSearch"
                  type="primary"
                  style="margin-left:20px">搜索</Button>
          <Button @click="handleReset"
                  type="default"
                  style="margin-left:20px">重置</Button>
        </div>
      </div>
    </Row>
    <Row>
      <Table border
             :columns="columns5"
             :data="data5"
             style="margin-top:20px"></Table>
    </Row>
    <Row type="flex"
         justify="end"
         class="page">
      <Page :current="searchForm.page"
            :total="total"
            :page-size="searchForm.limit"
            @on-change="changePage"
            @on-page-size-change="changePageSize"
            :page-size-opts="[10, 20, 50]"
            size="small"
            show-total
            show-elevator
            show-sizer></Page>
    </Row>
    <Modal v-model="modal1"
           title="分佣详情"
           @on-ok="ok"
           @on-cancel="cancel">
      <Table border
             :columns="columns10"
             :data="data10"
             style="margin-top:20px;width:485px"></Table>
    </Modal>
  </div>
</template>
<script>
import {
  orderList,
  orderDetail,
  timeRangeSearchOrderList
} from '@/api/mc/vip.js'
export default {
  data () {
    return {
      total: 0,
      selectDate: '',
      searchForm: {
        order_created_time: {
          start_time: '',
          end_time: ''
        },
        sort: { id: 'desc' }, // 自定义排序
        page: 1,
        limit: 10
      },
      limit: null,
      order_time: '',
      modal1: false,
      model1: '',
      data: [],
      columns5: [
        {
          title: '订单ID',
          key: 'id',
          width: '80',
          align: 'center'
        },
        {
          title: '订单编号',
          key: 'orderId',
          width: '300',
          align: 'center'
        },
        {
          title: '下单人',
          key: 'nickname',
          width: '100',
          render (h, params) {
            const { nickname } = params.row
            return h('span', params.row.relevance_order_user.nickname)
          },
          align: 'center'
        },
        {
          title: '下单时间',
          key: 'orderCreateTime',
          align: 'center'
        },
        {
          title: '电影名称',
          key: 'movie_name',
          render (h, params) {
            // const { movie_name } = params.row
            return h('span', params.row.cinemaInfo.movie_name)
          },
          align: 'center'
        },
        {
          title: '电影类型',
          key: 'type',
          render (h, params) {
            const { type } = params.row
            return h('span', params.row.cinemaInfo.type)
          },
          align: 'center'
        },
        {
          title: '总部分佣金额',
          key: 'amount',
          render (h, params) {
            const { type } = params.row
            return h('span', params.row.amount)
          },
          align: 'center'
        },
        {
          title: '操作',
          key: 'handle',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  attrs: {
                    type: 'success',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.modal1 = true
                      this.edit(params.row)
                      console.log('params.row', params.row)
                    }
                  }
                },
                '佣金详情'
              )
            ])
          },
          align: 'center'
        }
      ],
      columns10: [
        {
          title: '昵称',
          key: 'nickname',
          render (h, params) {
            return h('p', params.row.relevance_user.nickname)
          },
          align: 'center'
        },
        {
          title: '团队',
          key: 'level',
          render (h, params) {
            return h('p', params.row.level + '团')
          },
          align: 'center'
        },
        {
          title: '用户分佣金额',
          key: 'amount',
          align: 'center'
        },
        {
          title: '分佣比例',
          key: 'proportion',
          render (h, params) {
            return h('p', params.row.proportion * 100 + '%')
          },
          align: 'center'
        }
      ],
      data5: [],
      data10: [],
      rowTemp: {}
    }
  },
  created () {
    this.init()
  },
  methods: {
    ok () { },
    cancel () { },
    init () {
      this.getList()
    },
    // 日期选择
    selectDateRange (e) {
      this.searchForm.order_created_time.start_time = e[0]
      this.searchForm.order_created_time.end_time = e[1] + ' 23:59:59'
    },
    // 搜索
    handleSearch (e) {
      this.searchForm.page = 1
      this.getList()
    },
    // 重置
    handleReset () {
      this.selectDate = ''
      this.searchForm.page = 1
      this.searchForm.limit = this.limit
      this.searchForm.order_created_time.start_time = null
      this.searchForm.order_created_time.end_time = null
      this.getList()
    },
    // 选择当前行,显示佣金详情
    edit (e) {
      this.rowTemp = e
      orderDetail(this.rowTemp.id).then(res => {
        this.data10 = []
        console.log('佣金详情', res)
        res.map(v => {
          this.data10.push(v)
        })
        // this.data10.push(res)
      })
    },
    // 获取数据
    getList () {
      this.data5 = []

      orderList(this.searchForm).then(res => {
        this.data5 = []
        console.log('res', res)
        res.data.map(v => {
          this.data5.push(v)
        })
        this.total = res.meta.pagination.total
      })
    },
    // 分页
    changePage (v) {
      this.searchForm.page = v
      this.getList()
    },
    changePageSize (v) {
      this.limit = v
      this.searchForm.limit = v
      this.getList()
    }
  }
}
</script>
<style scoped></style>
